{{#section 'style'}}<link rel="stylesheet" href="/style/login.css">{{/section}}

<div class="reg">
    {{> top_login}}

    <div class="mid wrap">
        <div class="fl ad">
            <a href=""><img src="img/example/reg_ad.gif" alt=""/></a>
        </div>

        <form class="fr form bgWhite" method="post" id="registerForm">
            <div class="title">
                <span class="fr">已有帐号，<a href="/login">现在登录</a></span>
                <h2>免费注册</h2>
            </div>
            <div class="msg">
                {{#if flash.success}}<div class="success">{{flash.success}}</div>{{/if}}
                {{#if flash.error}}<div class="error">{{flash.error}}</div>{{/if}}
            </div>

            <div class="iptBox" data-type="name">
                <input type="text" class="ipt" name="name" placeholder="邮箱/手机号码" value="{{regCache.name}}"/>
                <p class="tip">请输入11位手机号码</p>
                <p class="invalid">未通过验证</p>
            </div>


            <div class="iptBox" data-type="password">
                <input class="ipt" type="password" name="password" placeholder="密码"/>
                <p class="tip">6-16个字符，建议使用大小写字母加数字或下划线组合</p>
                <p class="invalid">未通过验证</p>
            </div>


            <div class="iptBox" data-type="repeat">
                <input type="password" class="ipt" name="repeat" placeholder="重复密码"/>
                <p class="tip">请再次输入密码</p>
                <p class="invalid">未通过验证</p>
            </div>

            <div class="codeBox iptBox" id="captcha" data-type="captcha">
                <input type="hidden" value="{{captcha.code}}" class="hidden"/>
                <input type="text" class="ipt" placeholder="验证码"/>
                <div class="codeImg">
                    <img src="{{captcha.imgData}}" alt=""/>
                </div>
                <span class="change">换张图</span>
                <p class="tip">请填写图片的中字符，不区分大小写</p>
                <p class="invalid">未通过验证</p>
            </div>

            <div class="btn"><input type="button" value="同意协议并注册"/></div>

            <div class="protocol"><a href="">《51TeachBook用户协议》</a></div>

        </form>
    </div>

    {{>footer_login}}

</div>

{{#section 'script'}}
<script>
    $(function(){
        //切换验证码
        (function(){
            var $captcha=$('#captcha'),$change=$('.change',$captcha),$img=$('.codeImg>img',$captcha),$hidden=$('.hidden',$captcha);
            $change.on('click', function () {
                $.get('/captcha').success(function (data) {
                    $hidden.val(data.code);
                    $img.attr('src',data.imgData);
                });
            });
        })();

        //输入验证
        (function(){
            var self;
            var $form=$('#registerForm');
            var password,invalidRet;

            return {
                init: function () {
                    invalidRet={
                        name:false,
                        password:false,
                        repeat:false,
                        captcha:false
                    };
                    self=this;
                    $('.iptBox',$form).each(function(i,elm){
                        var type=$(elm).data('type');
                        $(elm).on('blur','.ipt',function(){
                            if(''==$(this).val())return;
                            self[type]&&self[type]($(elm),$(this).val(),type);
                        });
                    });
                    $('[type=button]',$form).on('click', function () {
                        for(var i in invalidRet){
                            if(!invalidRet[i]){
                                return void $('.change',$form).trigger('click');
                            }
                        }
                        $form.submit();
                    });
                },
                name: function ($name,val,type) {
                    self.show($name,(/^13\d{9}$/.test(val) || /^\w+@\w+\.\w+$/.test(val)),type);
                },

                password: function ($pass,val,type) {
                    password=val;
                    self.show($pass,/^\w{6,}$/.test(val),type);
                },

                repeat: function ($repeat,val,type) {
                    self.show($repeat,/^\w{6,}$/.test(val)&&password==val,type);
                },

                captcha: function ($captcha,val,type) {
                    self.show($captcha,$captcha.find('.hidden').val()==val,type);
                },

                show: function ($iptBox, ret,type) {
                    invalidRet[type]=ret;
                    $iptBox[ret?'addClass':'removeClass']('ok');
                    $iptBox[ret?'removeClass':'addClass']('err');
                }
            }
        })().init();

    });
</script>
{{/section}}